inline v.s. inline-block v.s. block 有何不同?

為 Interview Bit 的第 9 題。

常用的 display 屬性就是 inline、block 和 inline-block。

特徵

1. inline element
   CodePen 範例
   只會依照元素的內容決定內容的高和寬，並且和其他元素排成一排，只佔有必要的寬和高。

   • 元素的寬高皆不能手動設置，大小由內容決定。
   • 可以使用 padding，margin 的 left，right 產生間隔效果。

2. block element
   block element 永遠都會新的一行開始，並不會接在前一個元素的屁股後面， 寬度會呈現滿版狀態。

   • 元素的寬高，padding，margin皆能手動設置。
   • 元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

3. inline-block element
   不占 100% 寬度的 block element

   • 和其他元素各站一起
   • 元素的寬高，padding，margin皆能手動設置。

常見問題

inline-block 之間的縫隙如何消除?

在 display: flex 還沒出來之前，display: inline-block 大概是menu 最常用的 css 。
CodePen 範例

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

ul, li {
  /* 清除醜醜的 default style */
  list-style: none; 
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  /* debug 用，看起來元素之間會比較清楚*/
  border: 1px solid red;
  /* 將寬度設為 100px */
  width: 100px;
  /* 將 li 裡面的字體設為 20px */
  font-size: 20px;
}

可以看到各個 li 中間都有一點點的小空隙，那麼這個空隙其實是一個空白字元，那今天我們不想留這一個空白需要怎麼做?

解答：
因為空白是一個字元，所以我們將他的預設 font-size 變成 0px，就不會看到這一個空白，因此就能消除 li 之間的空隙了。大家可以在 CodePen 試試看。

ul, li {
  list-style: none; 
  padding: 0;
  margin: 0;
  font-size: 0px; 
}

li {
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  font-size: 20px;
}

參考資料：
详解CSS display:inline-block的应用
CSS 教學】inline、block、inline-block 使用時機講解
mdn web docs - Inline elements
Block-level elements